// 登录框 组件
import { Modal, Form, Input, Button } from 'antd'
import '../../styles/api/login.scss'


function Login (props) {
  // 表单提交时触发
  const onFinish = (value) => {
    console.log(value)
  }

  const onFinishFailed = (value) => {
    console.log(value)
  }

  return (
    <div className="login-content">
      {/* 对话框 */}
      <Modal
        title="登录"
        visible={props.isShow}
        onOk={props.handleOk}
        onCancel={props.handleCancel}
        okText="登录"
        cancelText="取消"
        size={'default'}>
          <Form
             layout={'vertical'}
             initialValues={{
              remember: true,
            }}
             onFinish={onFinish}
             onFinishFailed={onFinishFailed}>
            <Form.Item
              label="用户名"
              name="username"
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
            >
              <Input.Password />
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit">
                Submit
              </Button>
            </Form.Item>
          </Form>
      </Modal>
    </div>
  )
}

export default Login

// xs: <576px响应式栅格。
// sm：≥576px响应式栅格.
// md: ≥768px响应式栅格.
// lg: ≥992px响应式栅格.
// xl: ≥1200px响应式栅格.
// xxl: ≥1600px响应式栅格.